<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>
    <style>
        .even{
            background-color: crimson;
        }
        .odd{
            background-color: yellow;
        }
    </style>


</head>
<body>

<div id="app">
    <h3>计算器:计算两个值 如果两个值计算结果是偶数背景色是红色 如果是奇数背景色是黄色</h3>
    第一个值:<input type="text" v-model="a"><br/>
    第二个值:<input type="text" v-model="b"><br/>

    <span v-if="even" style="background-color: crimson">
        两个值和:{{total}}
    </span>

    <span v-if="odd" style="background-color: yellow">
        两个值和:{{total}}
    </span>
    <br/>
    <span :class="{'even':even,'odd':odd}">通过class计算-两个值和:{{total}}</span>

</div>

</body>

<script>
    Vue.createApp({
        data() {
            return {
                a:0,
                b:0,
                even:false,//偶数
                odd:false //奇数

            }
        },
        computed:{
          total(){
              return parseInt(this.a) + parseInt(this.b)
          }
        },
        watch:{
            total(newValue,oldValue){
                if(newValue%2==0){
                    this.even = true
                    this.odd = false
                }else{
                    this.even = false
                    this.odd = true
                }
            }
        }
    }).mount("#app")
</script>

</html>